import React from 'react';
import { Button, Select, Input, Table, Tag, Space,Modal } from 'antd'
import { getUserList ,delUser} from '../../../utils/api'
const { Option } = Select;
const { Search } = Input;

class UserList extends React.Component {
  handleChange = () => {

  }
  state = {
    selectedRowKeys: [],
    columns : [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        render: text => <h1>{text}</h1>,
      },
      {
        title: '手机',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '描述',
        dataIndex: 'desc',
        key: 'desc',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
      },
    
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Space size="middle">
            <a onClick={this.emit.bind(this,text)}>编辑</a>
            <a onClick={this.del.bind(this,text)}>删除</a>
          </Space>
        ),
      },
    ],
    data: []
  }
  emit= (text)=>{
    this.props.history.push('/org/adduser?id='+text.id)
  }
  del=(text)=>{
    
    Modal.confirm({
      title: '警告',
      content: '是否确定删除?',
      okText: '确认',
      cancelText: '取消',
      onOk:()=>{
        console.log('del',text)
        delUser(text.id).then(data=>{
          // 删除成功之后
          getUserList({}).then(data => {
            this.setState({
              data: data.data.map(item => {
                item.key = item.id
                return item
              })
            })
          })
        })
      }
    });
  }
  selectChange = (keys) => {
    console.log(keys)
    this.setState({
      selectedRowKeys: keys
    })
  }
  search=(str)=>{
    getUserList({
      search:str
    }).then(data => {
      this.setState({
        data: data.data.map(item => {
          item.key = item.id
          return item
        })
      })
    })
  }
  componentDidMount() {
    getUserList({}).then(data => {
      this.setState({
        data: data.data.map(item => {
          item.key = item.id
          return item
        })
      })
    })
  }

  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.selectChange
    }

    return <div className=''>
      <header style={{ display: 'flex' }}>
        <Button type='danger'>批量删除</Button>
        <Select defaultValue="lucy" style={{ width: 120 }} onChange={this.handleChange}>
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="disabled" disabled>
            Disabled
                    </Option>
          <Option value="Yiminghe">yiminghe</Option>
        </Select>
        <Search
          placeholder="input search text"
          enterButton="Search"
          size="large"
          onSearch={value => this.search(value)}
        />
      </header>
      <Table rowSelection={rowSelection} dataSource={this.state.data} columns={this.state.columns} />;

        </div>;
  }
}
export default UserList